.gql-url-container {
  display: flex;
  align-items: center;
  flex: 1;
  border: 1px solid var(--requestly-color-white-t-20);
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-radius: 4px;
  height: 34.85px;

  .api-request-url {
    flex: 1;
    border: 1px solid var(--requestly-color-white-t-10) !important;
    border-color: rgba(255, 255, 255, 0) !important;
    border-right-width: 0 !important;
    border-radius: 4px 0 0 4px;
    overflow: hidden;

    &.ant-input.editor-popup-container:focus,
    &.ant-input.editor-popup-container:focus-within {
      border-color: #1e69ff !important;
      box-shadow: none !important;
      border-right-width: 1px !important;
    }
  }

  .gql-url-container__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--requestly-color-text-subtle);
    height: 15px;

    span {
      font-size: var(--requestly-font-size-2xs);
    }

    .ant-spin {
      color: unset;
      line-height: 0;
    }
  }

  .gql-url__fetch-status {
    align-self: flex-end;

    .gql-url__fetch-status-icon {
      font-size: var(--requestly-font-size-sm);

      &.schema-failed {
        color: var(--requestly-color-error-soft);
      }

      &.schema-success {
        color: var(--requestly-color-success);
      }
    }
  }

  .gql-url__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 0 var(--space-4, 8px);

    .ant-btn {
      color: var(--requestly-color-text-subtle);

      &:hover {
        color: var(--requestly-color-text-default);
      }
    }
  }
}
